import { defineComponent, PropType, computed, ref } from 'vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { Drawer, Input } from 'ant-design-vue';
import './KeyboardDrawer.scss';

export default defineComponent({
    props: {
        // 键盘类型
        type: {
            type: String as PropType<"normal" | "letter" | "number">,
            default: "normal"
        },
        // 是否显示键盘
        modelValue: {
            type: Boolean as PropType<boolean>,
            default: false,
            required: true,
        },
        // 输入框的值
        value: {
            type: String as PropType<string>,
            default: "",
        },
    },
    emits: [
        "update:modelValue",
        "update:value",
        "keySubmit",
    ],
    setup(props, { emit }) {
        const keyFlag = ref(true);//大小写模式切换标识

        // 基础键盘数据
        const num = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
        const max = [
            'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
            'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
            'Z', '小写', 'X', 'C', 'V', 'B', 'N', 'M', '删除'
        ];
        const min = [
            'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
            'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',
            'z', '大写', 'x', 'c', 'v', 'b', 'n', 'm', '删除'
        ];
        // 修改数字键盘布局：前三排3个按钮，最后一排0占两个位置，删除占一个
        const numberOnly = [
            ['1', '2', '3'],
            ['4', '5', '6'],
            ['7', '8', '9'],
            ['0', '删除'] // 最后一排特殊处理
        ];

        // 根据类型计算键盘数据
        const province = computed(() => {
            if (props.type === "normal") {
                return [...num, ...max];
            } else if (props.type === "letter") {
                return [...max];
            } else {
                return numberOnly;
            }
        });

        const numberLetter = computed(() => {
            if (props.type === "normal") {
                return [...num, ...min];
            } else if (props.type === "letter") {
                return [...min];
            } else {
                return numberOnly;
            }
        });

        const list = computed(() => {
            if (props.type === "number") {
                return numberOnly;
            }
            return keyFlag.value ? province.value : numberLetter.value;
        });

        const clickKey = (text: string) => {
            // 纯数字模式下屏蔽大小写切换
            if (props.type !== "number" && (text === '大写' || text === '小写')) {
                keyFlag.value = !keyFlag.value;
            } else if (text === '删除') {
                if (props.value) {
                    emit("update:value", props.value.substring(0, props.value.length - 1));
                }
            } else {
                emit("update:value", props.value + text);
            }
        };

        const handleClear = () => {
            emit("update:value", "");
        };

        const onClose = () => {
            emit("update:modelValue", false);
        };

        const submit = () => {
            emit("keySubmit", props.value);
            emit("update:modelValue", false);
        };

        return () => (
            <Drawer
                height="auto"
                closable={false}
                placement="bottom"
                visible={props.modelValue}
                onClose={onClose}
                style={{ width: '100%' }}
            >
                <div class={`keyWrapper keyShow ${props.type === "number" ? "number-key-wrapper" : ""}`}>
                    <div class="title">
                        <button class="key bigKey top red" onClick={onClose}>
                            关闭
                        </button>
                        <Input
                            v-model={[props.value, 'value']}
                            class="inp"
                            readonly
                            allowClear
                            suffix={
                                props.value ? (
                                    <CloseCircleOutlined
                                        style={{ color: 'rgba(0, 0, 0, 0.45)' }}
                                        onClick={handleClear}
                                    />
                                ) : null
                            }
                        />
                        <button class="key bigKey top blue" onClick={submit}>
                            确定
                        </button>
                    </div>

                    <div class={`content ${props.type === "number" ? 'number-only' : ''}`}>
                        {props.type === "number"
                            ? (Array.isArray(list.value)
                                    ? list.value.map((row, rowIndex) => (
                                        <div key={rowIndex} class="key-row">
                                            {Array.isArray(row)
                                                ? row.map((item: string, btnIndex: number) => (
                                                    <button
                                                        key={btnIndex}
                                                        onClick={() => clickKey(item)}
                                                        class={`key number-key 
                                                            ${item === '删除' ? "delete-key" : ""}
                                                            ${rowIndex === 3 && item === '0' ? "zero-key" : ""}
                                                        `}
                                                    >
                                                        {item}
                                                    </button>
                                                ))
                                                : null
                                            }
                                        </div>
                                    ))
                                    : null
                            )
                            : list.value.map((item, index) => (
                                <button
                                    key={index}
                                    onClick={() => {
                                        if (typeof item === 'string') {
                                            clickKey(item);
                                        }
                                    }}
                                    class={`key ${props.type === "number" ? 'number-key' : ''} ${(item === '小写' || item === '删除' || item === '大写') ? "bigKey" : ""} `}
                                >
                                    {item}
                                </button>
                            ))
                        }
                    </div>
                </div>
            </Drawer>
        );
    }
});
